import React, { PureComponent } from 'react';
// import moment from 'moment';
import { connect } from 'dva';
import { Card, List } from 'antd';
import AvatarList from 'components/AvatarList';
import Ellipsis from 'components/Ellipsis';
import styles from './Testrun.less';

/* eslint react/no-array-index-key: 0 */

@connect(({ autotest, loading }) => ({
  autotest,
  // loading: loading.models.autotest,
  loading: loading.effects['autotest/fetchTestrunData']
}))
export default class Testrun extends PureComponent {
  componentDidMount() {
    this.props.dispatch({
      type: 'autotest/fetchTestrunData',
      // payload: {
      //   count: 8,
      // },
    });
  }

  render() {
    const { autotest: { autotest = [] }, loading } = this.props;

    const cardList = autotest ? (
      <List
        rowKey="id"
        loading={loading}
        grid={{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}
        dataSource={autotest}
        renderItem={item => (
          <List.Item>
            <Card
              className={styles.card}
              hoverable
              cover={<img alt={item.title} src={item.cover} height={154} />}
            >
              <Card.Meta
                title={<a href="#">{item.title}</a>}
                description={<Ellipsis lines={2}>{item.subDescription}</Ellipsis>}
              />
              <div className={styles.cardItemContent}>
                {/* <span>{moment(item.updatedAt).fromNow()}</span> */}
                <div className={styles.avatarList}>
                  <AvatarList size="mini">
                    {/* {item.members.map((member, i) => (
                      <AvatarList.Item
                        key={`${item.id}-avatar-${i}`}
                        src={member.avatar}
                        tips={member.name}
                      />
                    ))} */}
                  </AvatarList>
                </div>
              </div>
            </Card>
          </List.Item>
        )}
      />
    ) : null;

    return (
      <div className={styles.coverCardList}>
        <Card bordered={false}>
          <div className={styles.cardList}>{cardList}</div>
        </Card>
      </div>
    );
  }
}
